<template>
  <a-table :dataSource="dataSource" :columns="columns" :pagination="false" @resizeColumn="handleResizeColumn">
    <template #title>{{ title }}</template>
  </a-table>
</template>
<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "ProgressNode",
  inject: ["getNode"],
  data() {
    return {
      dataSource: [
        {
          key: '1',
          name: '西湖区湖底公园1号西',
          age: 123,
          address: '西湖区湖底公园1号西湖区湖底公园1号西湖区湖底公园1号',
        },
        {
          key: '2',
          name: '胡彦祖',
          age: 42,
          address: '西湖区湖底公园1号西湖区湖底公园1号西湖区湖底公园1号',
        },
      ],
      columns: [
        {
          title: '姓名',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '年龄',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: '住址',
          dataIndex: 'address',
          key: 'address',
        },
      ],
      title: '表头'
    };
  },
  methods: {
    handleResizeColumn(w, col){
      col.width = w;
      this.updateNodeSize();
    },
    initDataFromNode() {
      if (this.getNode) {
        const node = this.getNode();
        console.log(node);
        console.log(node.getData());
        let nodeData = node.getData();
        if (nodeData) {
          this.title = nodeData.title;
          this.dataSource = JSON.parse(JSON.stringify(nodeData.dataSource));
          this.columns = JSON.parse(JSON.stringify(nodeData.columns));
        }
      }
    },
    updateNodeSize() {
      let newHeight = this.$el.clientHeight;
      console.log(this.$el.clientHeight);
      if (!this.getNode) {
        return;
      }
      let node = this.getNode();
      if (!node) {
        return;
      }
      let nodeSize = node.getProp("size");
      console.log("bef", nodeSize, newHeight)
      if (nodeSize.height != newHeight) {
        node.setProp({ "size": { "height": newHeight , width: nodeSize.width } });
      }
      console.log("aft", nodeSize, newHeight)
    },
  },

  created() {
    this.initDataFromNode();
  },
  mounted() {
    this.updateNodeSize();
  }
});
</script>